<template>
  <div class="search">
    <el-autocomplete
      clearable
      :trigger-on-focus="false"
      class="inline-input w-50 form"
      placeholder="请输入医院名称"
      v-model="hosname"
      :fetch-suggestions="fetchData"
      @select="goDetail"
    />
    <el-button type="primary" size="default" :icon="Search"></el-button>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import { onMounted, ref } from "vue";
// @ts-ignore
import { Search } from "@element-plus/icons-vue";
// @ts-ignore
import { reqHospitalInfo } from "@/api/home";
// @ts-ignore
import type { HospitalInfo, Content } from "@/api/home/type";
import {useRouter} from "vue-router"
// 搜集搜索的关键字（医院的名字）
let hosname=ref<string>('')
// 顶部组件的回调
const fetchData=async(keyword: string, cb: callbackfn)=>{
  let result:HospitalInfo=await reqHospitalInfo(keyword)
  // 给组件提供展示的数据
  let showData=result.data.map(item=>{
    return{
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  cb(showData)
}
// 跳转至详情页
const router=useRouter()
const goDetail=(item:any)=>{
  router.push({path:'/hospital/register',query:{hoscode:item.hoscode}})
  console.log(item)
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 65px;
  width: 100%;
  ::v-deep(.form) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>